<template>
  <a-spin :spinning="confirmLoading">
    <j-form-container :disabled="formDisabled">
      <a-form-model
        ref="messageConfigForm"
        slot="detail"
        :label-col="labelCol"
        :model="model"
        :wrapper-col="wrapperCol"
      >
        <a-row>
          <a-form-model-item ref="name" :rules="rules.name" label="消息名称" prop="name">
            <a-input v-model="model.name" placeholder="请输入名称"></a-input>
          </a-form-model-item>
          <a-form-model-item ref="smsType" :rules="rules.smsType" label="消息类型" prop="smsType">
            <a-select v-model="model.smsType" :allowClear="true" placeholder="请选择消息类型">
              <a-select-option
                v-for="type in messageTypeOptions"
                :key="type.value"
                :disabled="type.disabled"
              >
                {{ type.text }} [{{ type.value }}]
              </a-select-option>
            </a-select>
          </a-form-model-item>
          <a-form-model-item v-if="model.smsType === 6" ref="networkService" :rules="rules.networkService" label="网络服务" prop="networkService">
            {{model.networkService}}
            <a-select
              v-model="model.networkService"
              :getPopupContainer="(node) => node.parentNode"
              allowClear
              :triggers="true"
              placeholder="请选择网络服务"
            >
              <a-select-option v-for="networkService in networkServiceOptions" :key="networkService.id">{{ networkService.name }}</a-select-option>
            </a-select>
          </a-form-model-item>
          <a-form-model-item ref="" :rules="rules.sender" label="发送方" prop="sender">
            <a-input v-model="model.sender" placeholder="请输入发送方"></a-input>
          </a-form-model-item>
          <a-form-model-item ref="" :rules="rules.receiver" label="接收方" prop="receiver">
            <!-- 网络服务的接收者为服务下面的连接 -->
            <template v-if="model.smsType === 6">
              <!-- 网络连接 -->
              <a-select
                v-model="model.receiver"
                :getPopupContainer="(node) => node.parentNode"
                allowClear
                placeholder="请选择网络连接"
              >
                <a-select-option v-for="connect in networkConnectOptions" :key="connect.id">{{connect.name}}</a-select-option>
              </a-select>
            </template>
            <!-- 系统消息的接收方是系统用户 -->
            <template v-if="model.smsType === 4">
              <j-select-multi-user v-model="model.receiver"></j-select-multi-user>
            </template>
          </a-form-model-item>
          <a-form-model-item ref="" :rules="rules.remark" label="备注" prop="remark">
            <a-textarea v-model="model.remark" placeholder="请输入备注" rows="4"/>
          </a-form-model-item>
          <a-form-model-item ref="config" label="配置信息" prop="config">
            <a-textarea v-model="model.config" :disabled="true" rows="4"/>
          </a-form-model-item>
          <a-col v-if="showFlowSubmitButton" :span="24" style="text-align: center">
            <a-button @click="submitForm">提 交</a-button>
          </a-col>
        </a-row>
      </a-form-model>
    </j-form-container>
  </a-spin>
</template>

<script>

import {getAction, httpAction} from '@/api/manage'
import JFormContainer from '@/components/jeecg/JFormContainer'
import JDictSelectTag from '@/components/dict/JDictSelectTag'
import JSelectMultiUser from '@comp/jeecgbiz/JSelectMultiUser'

export default {
  name: 'SysSmsConfigForm',
  components: {
    JSelectMultiUser,
    JFormContainer,
    JDictSelectTag
  },
  props: {
    //流程表单data
    formData: {
      type: Object,
      default: () => {
      },
      required: false
    },
    //表单模式：true流程表单 false普通表单
    formBpm: {
      type: Boolean,
      default: false,
      required: false
    },
    //表单禁用
    disabled: {
      type: Boolean,
      default: false,
      required: false
    }
  },
  data() {
    return {
      model: {},
      messageTypeOptions: [],
      networkServiceOptions: [],
      networkConnectOptions: [],
      labelCol: {
        xs: {span: 24},
        sm: {span: 5}
      },
      wrapperCol: {
        xs: {span: 24},
        sm: {span: 16}
      },
      confirmLoading: false,
      rules: {
        name: [
          {required: true, message: '请输入消息配置名称!'},
          {min: 3, max: 30, message: '消息配置名称长度为3-30个字符'}
        ],
        smsType: [
          {required: true, message: '请输入消息类型!'}
        ]
      },
      url: {
        add: '/message/sysSmsConfig/add',
        edit: '/message/sysSmsConfig/edit',
        queryById: '/message/sysSmsConfig/queryById'
      }
    }
  },
  computed: {
    formDisabled() {
      if (this.formBpm === true) {
        if (this.formData.disabled === false) {
          return false
        }
        return true
      }
      return this.disabled
    },
    showFlowSubmitButton() {
      if (this.formBpm === true) {
        if (this.formData.disabled === false) {
          return true
        }
      }
      return false
    },
    networkService() {
      return this.model.networkService
    }
  },
  watch: {
    networkService(val, oval) {
      this.getNetworkConnect(val)
    }
  },
  created() {
    //如果是流程中表单，则需要加载流程表单data
    this.showFlowData()
    this.getMessageType()
    this.getNetworkService()
  },
  methods: {
    getNetworkConnect(networkServiceId) {
      let scope = this
      getAction('network/manage/listConnectById', {id: networkServiceId}).then(res => {
        if (res.success) {
          scope.networkConnectOptions = res.result
        }
      })
    },
    getMessageType() {
      let scope = this
      getAction('alarm/config/getNoticeType').then(res => {
        if (res.success) {
          scope.messageTypeOptions = res.result.map(type => {
            type['disabled'] = !(type.value === 4 || type.value === 6);
            return type
          })
        }
      })
    },
    getNetworkService() {
      let scope = this
      getAction('network/manage/listAll').then(data => {
        if (data.success) {
          scope.networkServiceOptions = data.result
        }
      })
    },
    add() {
      this.edit({})
    },
    edit(record) {
      this.model = Object.assign({}, record)
      this.visible = true
    },
    //渲染流程表单数据
    showFlowData() {
      if (this.formBpm === true) {
        let params = {id: this.formData.dataId}
        getAction(this.url.queryById, params).then((res) => {
          if (res.success) {
            this.edit(res.result)
          }
        })
      }
    },
    submitForm() {
      const that = this
      // 触发表单验证
      this.$refs.messageConfigForm.validate(valid => {
        if (valid) {
          that.confirmLoading = true
          let httpurl = ''
          let method = ''
          if (!this.model.id) {
            httpurl += this.url.add
            method = 'post'
          } else {
            httpurl += this.url.edit
            method = 'put'
          }
          console.log('表单提交数据', this.model)

          httpAction(httpurl, this.model, method).then((res) => {
            if (res.success) {
              that.$message.success(res.message)
              that.$emit('ok')
            } else {
              that.$message.warning(res.message)
            }
          }).finally(() => {
            that.confirmLoading = false
          })
        }

      })
    },
  }
}
</script>